$(function(){
    var $tog=$(".ul1 li");
    $tog.hover(function(){
        if($(this).find(".ul1-div").is(":animated")){
            $(this).find(".ul1-div").stop(true,false);
        }
        $(this).find(".ul1-div").animate({top:"10px",height:"70px"})
            .parent().siblings().find(".ul1-div").animate({top:"0",height:"10px"});
    });

});
window.onscroll=function () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    if(scrollTop > 2550){
        $(".nav-top").css("background-color","#7f4c76");
        $(".ul1-div").css("background","#b288ab");
        $(".li4").removeAttr("style");
        $(".li3").css({top:"0",height:"10px"});
        $(".li2").css({top:"0",height:"10px"});
        $(".li1").css({top:"0",height:"10px"});
    } else if(scrollTop >1680){
        $(".nav-top").css("background-color","#32ac97");
        $(".ul1-div").css("background","#46dcc7");
        $(".li3").removeAttr("style");
        $(".li4").css({top:"0",height:"10px"});
        $(".li2").css({top:"0",height:"10px"});
        $(".li1").css({top:"0",height:"10px"});
    }else if(scrollTop >700){
        $(".nav-top").css("background-color","#f17c72");
        $(".ul1-div").css("background","#e6655e");
        $(".li2").removeAttr("style");
        $(".li4").css({top:"0",height:"10px"});
        $(".li3").css({top:"0",height:"10px"});
        $(".li1").css({top:"0",height:"10px"});
    }else if(scrollTop >0){
        $(".nav-top").css("background-color","#334960");
        $(".ul1-div").css("background","#3f9fc9");
        $(".li1").removeAttr("style");
        $(".li4").css({top:"0",height:"10px"});
        $(".li2").css({top:"0",height:"10px"});
        $(".li3").css({top:"0",height:"10px"});
    }
};
